<template>
  <massif-layout>
    <template #left>
      <div class="massifIndex">
        <div class="tobBox">
          <div class="back" @click="goBack">
            <el-icon><ArrowLeft /></el-icon>
            <span>返回</span>
          </div>
          <h5>地块属性详情</h5>
          <div class="btnBox">
            <el-icon title="删除" @click="del"><Delete /></el-icon>
            <el-icon v-if="tabIndex==1" title="编辑" @click="goEdit"><Edit /></el-icon>
          </div>
        </div>
        <div class="tabBox">
          <el-tabs v-model="tabIndex" class="demo-tabs" style="width: 100%;" @tab-click="handleClick">
            <el-tab-pane label="基本信息" name="1" />
            <el-tab-pane label="土壤成分" name="2" />
          </el-tabs>
        </div>
        <div v-if="detail" class="ltMainBox">
          <base-info v-if="tabIndex==1" :detail="detail" />
          <soil-info v-else-if="tabIndex==2" :detail="detail" @set="tabIndex=1" />
        </div>
      </div>
    </template>
    <tencent-map ref="mapRef" />
    <map-mode-control v-if="mapRef" :map-obj="mapRef" />
  </massif-layout>
</template>

<script setup>
// 这里的name是为了做页面缓存，其值要跟路由里面的name值一样

import { nextTick, ref, watch, onActivated, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'

import { getLandDetail, delFarmLand } from '@/api/plant'
import { message } from '@/utils/element'

import massifLayout from '../components/layout.vue'
import baseInfo from './components/baseInfo.vue'
import soilInfo from './components/soilInfo.vue'
import tencentMap from '@/components/custom/tencentMap.vue'
import mapModeControl from '@/components/custom/mapModeControl.vue'
import { useUserStore } from '@/pinia/modules/user'
import { ElMessageBox } from 'element-plus'

const router = useRouter()
const userStore = useUserStore()

const mapRef = ref(null)
const farmLandId = ref('') // 地块id
const tabIndex = ref('1')
const detail = ref('') // 详情数据
let mapAreaObj = ref('')
let infowindowObj = ''
let hoverInfowindowObj = ''

onMounted(async() => {
  farmLandId.value = router.currentRoute.value.query.id
  get_land_detail()
  await nextTick()
})

const get_land_detail = () => {
  getLandDetail(farmLandId.value).then(res => {
    detail.value = res.data
    mapRef.value.setCenter(detail.value.locationLatitude, detail.value.locationLongitude) // 设置地图中心点
    createMapArea(JSON.parse(detail.value.location), detail.value) // 绘制地图区域
    mapRef.value.setZoom(14.8)
  })
}

// 在地图上创建地块区域
const createMapArea = (locations, item) => {
  const paths = []
  const obj = {
    path: [],
    styleId: 'styel1',
    farmLandId: item.farmLandId,
    itemData: item,
  }
  locations.forEach(ele => {
    obj.path.push(ele.lat)
    obj.path.push(ele.lng)
  })
  paths.push(obj)
  mapAreaObj = mapRef.value.createArea(paths)
  infowindowObj = mapRef.value.setMarker2(item.locationLatitude, item.locationLongitude, mapShowTemplate(item, 'mapMarker', true))
  // 添加鼠标hover事件
  mapAreaObj.on('hover', function(e) {
    if (e.detail.area) { // 点击了区域
      const item = e.detail.area.itemData
      hoverInfowindowObj = mapRef.value.setMarker2(item.locationLatitude, item.locationLongitude, mapShowTemplate(item, 'mapMarker'))
    } else {
      hoverInfowindowObj && hoverInfowindowObj.destroy() // 销毁
    }
  })
}

const goBack = () => {
  router.back(-1)
}

const goEdit = () => {
  router.push(`/factor/land/add?farmLandId=${detail.value.farmLandId}&farmId=${detail.value.farmId}`)
}

const del = (item) => {
  ElMessageBox.confirm('确认删除地块吗?', '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async() => {
    const res = await delFarmLand([detail.value.farmLandId])
    if (res.code == 0 || res.success) {
      message('删除成功', 2)
      goBack()
    } else {
      message(res.message, 3)
    }
  })
}
const handleClick = () => {

}

window.mapInfoWindowClose = function() {
  infowindowObj && infowindowObj.destroy()
}
const mapShowTemplate = (item, className = 'mapMarker', showClose = false) => {
  return `<div class="${className}">
            <div class="conbox">
                ${showClose ? '<i onclick="mapInfoWindowClose()"></i>' : ''}
                <p><b>分组名称：</b>${item.groupName}</p>
                <p>${item.locationAddress}</p>
            </div>
            <div class="conbox">
                <p><b>面积：</b>${item.areaSize}</p>
                <p><b>地块权属：</b>${item.landBelong}</p>
            </div>
        </div>`
}
</script>

  <style lang="scss" scoped>
    .massifIndex{
        box-sizing: border-box;
        display: flex;
        flex-flow: column;
        height: 100%;
        padding: 10px 0;
        overflow: hidden;
        .tobBox{
            position: relative;
            z-index: 10;
            font-size: 12px;
            box-sizing: border-box;
            align-items: center;
            height: 30px;
            line-height: 29px;
            padding: 0 10px;
            border-bottom: 1px solid #e9e7e7;
            h5{
                font-size: 13px;
                font-weight: normal;
                text-align: center;
            }
            .back{
                display: flex;
                align-items: center;
                position: absolute;
                left: 10px;
                top: 0;
                z-index: 10;
                height: 100%;
                line-height: 29px;
                font-size: 12px;
                cursor: pointer;
                &:hover{
                    color: #48b27a;
                }
                span{
                    flex-shrink: 0;
                }
            }
            .btnBox{
                display: flex;
                align-items: center;
                position: absolute;
                right: 10px;
                top: 0;
                z-index: 10;
                height: 100%;
                i{
                    font-size: 18px;
                    cursor: pointer;
                    &:hover{
                        color: #48b27a;
                    }
                    &+i{
                        margin-left:10px ;
                    }
                }
            }
        }
        .tabBox{
            display: flex;
            box-sizing: border-box;
            align-items: center;
            height: 40px;
            padding: 0 15px;
            overflow: hidden;
        }

        .ltMainBox{
            box-sizing: border-box;
            //flex: 1;
            height: calc(100vh - 174px);
            flex-shrink: 0;
            width: 100%;
            padding: 0 10px;
            overflow: hidden;
            overflow-y: auto;
        }
        .bottom-page{
            box-sizing: border-box;
            flex-shrink: 0;
            height: 30px;
            padding: 0 15px;
        }
    }
  </style>
  <style lang="scss">
  .tabBox{
    .el-tabs__header {
        margin: 0;
    }
    .el-tabs__nav{
        display: flex;
        width: 100%;
        .el-tabs__item{
            flex: 1;
            text-align: center;
            font-size: 12px;
        }
    }
  }
  </style>

